import React, { Component } from 'react';
//import './App.css';
import '../css/skin.css';
import '../css/apply-detail.css';
let dics_arr = [];

class App extends Component {
  constructor(props){
      super(props);
      this.state = {
        infos: {}
      };
      //console.log(this.props.location.query.id);
  }

  componentDidMount() {
    let _dickeys = 'SEX,BEAR_STATUS,MARRIAGE_STATUS';
    let _url = 'http://58.220.10.23:8001/api/dic/queryDicByIndexkeys?indexkeys[]='+_dickeys;
    fetch( _url, { method: 'GET', credentials: 'include',
	   }).then(response => response.json())
	   .then(data=>{
        dics_arr = data;
	   })

    try{
      if( this.props.location.query.id ){
        console.log( this.props.location.query.id );
        // ajax get datas
        let _url = 'http://58.220.10.23:8001/api/loanapply/detail/'+this.props.location.query.id;
        fetch(_url, {
      	  method: 'POST',
          credentials: 'include',
    	   }).then(response => response.json())
    	   .then(data=>{
            console.log(data);
            if( data.status==0 ){
              // hide number
              let phone = data.data.phone;
              let identityCardNo = data.data.identityCardNo;
              data.data.phone = phone.substr(0,3) + '****' + phone.substr(7);
              data.data.identityCardNo = identityCardNo.substr(0,4) + '******' + identityCardNo.substr(10);
              data.data['sexName'] = dics_arr.SEX[data.data.sex];
              data.data['marriageStatusName'] = dics_arr.MARRIAGE_STATUS[data.data.marriageStatus];
              data.data['bearStatusName'] = dics_arr.BEAR_STATUS[data.data.bearStatus];
              this.setState({
                infos : data.data
              });
            }
            //console.log(this.state.infos);
    	   })
      }
    }catch(e){
      this.props.history.push('applyList');
    }
  }

  render() {
    return (
      <div className="skin-blue">
      	<p className="b-title bg-color">
          <span className="bg-color title-text white">借款详情</span>
        </p>

	      <div className="container">
          <div className="form-type-wrap">
            <p className="border-color type-name">基本信息</p>
          </div>
          <ul id="basic">
    	 			<li>
    	 				<span className="info-label">姓名</span>
                    	<span className="info-data">{this.state.infos.identityName}</span>
        			</li>
    	 			<li>
    	 				<span className="info-label">性别</span>
              <span className="info-data">{this.state.infos.sexName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">年龄</span>
                    	<span className="info-data">{this.state.infos.age}</span>
        			</li>
    	 			<li>
    	 				<span className="info-label">身份证号</span>
                <span className="info-data">{this.state.infos.identityCardNo}</span>
        			</li>
    	 			<li>
    	 				<span className="info-label">手机</span>
                    	<span className="info-data">{this.state.infos.phone}</span>
        			</li>
    	 			<li>
    	 				<span className="info-label">居住地</span>
                    	<span className="info-data">{this.state.infos.privinceName}-{this.state.infos.cityName}</span>
        			</li>
    	 			<li>
    	 				<span className="info-label">居住时长</span>
                    	<span className="info-data">{this.state.infos.residenceTimeName}</span>
        			</li>
    	 			<li>
    	 				<span className="info-label">住房信息</span>
                    	<span className="info-data">{this.state.infos.residenceTypeName}</span>
        			</li>
    	 			<li>
    	 				<span className="info-label">学历</span>
              <span className="info-data">{this.state.infos.educationBgName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">婚姻状况</span>
                <span className="info-data">{this.state.infos.marriageStatusName}</span>
        			</li>
    	 			<li>
    	 				<span className="info-label">生育状况</span>
                    	<span className="info-data">{this.state.infos.bearStatusName}</span>
        			</li>
            </ul>

          <div className="form-type-wrap">
            <p className="border-color type-name">公司信息</p>
          </div>
          <ul id="company">
    	 			<li>
    	 				<span className="info-label">职业</span>
              <span className="info-data">{this.state.infos.professionName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">公司性质</span>
              <span className="info-data">{this.state.infos.companyTypeName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">工作年限</span>
              <span className="info-data">{this.state.infos.worklifeName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">收入流水</span>
              <span className="info-data">{this.state.infos.incomeModeName}</span>
        		</li>
          </ul>

          <div className="form-type-wrap">
            <p className="border-color type-name">借款信息</p>
          </div>
          <ul id="loan" style={{margin: '0 0 2.0rem 0'}}>
    	 			<li>
    	 				<span className="info-label">贷款金额</span>
              <span className="info-data">{this.state.infos.amount}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">贷款时间</span>
              <span className="info-data">{this.state.infos.loanPeriod}{this.state.infos.loanPeriodName}</span>
        		</li>
          </ul>
        </div>
      </div>

    );
  }
}

export default App;
